<template>
  <div class="contains" ref="contains">
    <div>
      <div class="header-title">当前城市</div>
      <div class="item-list">
        <div class="item-wrapper">
          <div class="item-city" @click="clickItem('')">{{this.city}}</div>
        </div>
      </div>
      <div class="header-title">热门城市</div>
      <div class="item-list">
        <div class="item-wrapper" @click="clickItem(item.name)" v-for="item in hotCities" :key="item">
          <div class="item-city">{{item.name}}</div>
        </div>
      </div>
      <div v-for="(item,key) of cities" :key="key">
        <div class="header-title">{{key}}</div>
        <div class="item border-bottom" @click="clickItem(cityItem.name)" v-for="cityItem in item" :key="cityItem.id">
          {{cityItem.name}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Bscroll from 'better-scroll'
  import {mapState, mapMutations} from 'vuex'

  export default {
    name: 'CityMain',
    props: {
      hotCities: Array,
      cities: Object
    },
    computed: {
      ...mapState(['city'])
    },
    mounted () {
      this.scroll = new Bscroll(this.$refs.contains)
    },
    methods: {
      clickItem (name) {
        if (name) {
          this.updateCurCity(name)
        }
        this.$router.push('/')
      },
      ...mapMutations(['updateCurCity'])

    }

  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .contains
    top: 0.84rem
    left: 0
    overflow hidden
    right: 0
    position absolute
    bottom: 0

  .border-bottom
    border-color: #ccc

  .header-title
    height 0.25rem
    font-size 0.12rem
    background-color #eee
    padding-left 0.1rem
    line-height 0.25rem

  .item-list
    overflow: hidden
    padding: .05rem .1rem .05rem 0.05rem

    .item-wrapper
      width 32%
      float left

      .item-city
        margin 0.05rem
        text-align center
        padding 0.04rem 0
        border 0.01rem solid #ccc
        border-radius .05rem

  .item
    height 0.3rem
    line-height 0.3rem
    margin 0 auto
    padding-left 0.1rem

</style>
